<template>
    <div :class="'van-after-border '+item.class">
        <van-field
                readonly
                clickable
                :name="item.key"
                v-model="item.value"
                :placeholder="item.placeholder||'点击选择日期'"
                @click="_click"
        >
            <template #label>
                <span class="custom-title">{{label}}<van-icon v-if="help" @click="showHelp"  name="question" /></span>
            </template>
            <template #right-icon>
                <div class="iconfont">&#xe67f;</div>
            </template>
        </van-field>
        <van-popup position="bottom" v-model="showPicker">
            <van-datetime-picker
                    type="date"
                    @cancel="onCancel"
                    @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script>
    import QaBase from "./QaBase";
    import {parseTime} from "../../../utils";
    export default {
        name: "QaDate",
        extends:QaBase,
        data() {
            return {
                refProp: this.$props.item,
                showPicker: false
            }
        },
        props: ["item"],
        computed: {
            columns: function () {
                let columns = this.initValue
                return columns.map(function (option) {
                    return option.label
                })

            }
        }, methods: {
            _click(){
                if(this.disabled||this.readonly){
                    this.showReadonlyTip();
                    return;
                }
                this.showPicker=true
            },
            onConfirm(text) {
                this.showPicker = false;
                this.$props.item.value = parseTime(text, '{y}-{m}-{d}')
                this.$props.item.showVal = parseTime(text, '{y}-{m}-{d}')
            },
            onCancel() {
                this.showPicker = false;
            }
        }
    }
</script>
